<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title>违章首页</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<style>
			ul {
				display: flex;
				justify-content: space-around;
			}

			li {
				float: left;
				display: inline;
				margin-top: 5px;
				cursor: pointer;
			}

			.p {
				text-align: center;
				font-size: 5px;
				color: #666666;
			}

			.noticeDiv label {
				display: block;
				height: 30px;
				line-height: 30px;
				padding-left: 5px;
				font-size: 10px;
				color: #FD482C;
				border: 1px solid #b8b8b8;
			}


			/* 入口主题 */
			.list1 img {
				width: 70px;
				height: 70px;
				border-radius: 35px;
			}

			/* 热门主题 */
			.list2 img {
				width: 170px;
				height: 40px;
				border-radius: 8px;
			}

			/* 导航 */
			.list3 img {
				width: 60px;
				height: 40px;
				border-radius: 10px;
			}

			.p1 {
				float: left;
				display: inline;
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: #009F95;
				background-image: url(image/1.png);
			}

			.layui-tab-title {
				position: unset;
			}

			.layui-tab-title li {
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-image: url(image/1.png);
				padding: unset;
			}

			.navDiv {
				position: fixed;
				bottom: 0;
				right: 0;
				left: 0;
				bottom: 0;
				justifyContent: 'center';
				flexDirection: 'row';
				background-color: #40AFFE;
				height: 60px;
			}

			.navDiv .p {
				color: #00FF00;
			}

			.newsDiv div {
				height: 40px;
				line-height: 40px;
				border: 1px solid #bebebe;
				margin: 5px 0px;
				padding-left: 5px;
			}

			.news-pic {
				width: 20%;
				float: left;
				height: 70px;
				margin-left: 5px;
			}

			.news-content {
				width: 75%;
				float: left;
				background-color: #009F95;
				height: 70px;
				margin-left: 5px;
				padding-left: 5px;
			}

			.news-content-title {
				color: #000000;
				font-size: 16px;
			}

			.news-content-body {
				color: #555555;
				font-size: 13px;
			}

			.news-pic img {
				width: 100%;
				height: 70px;
			}

			.active {
				background-color: #009688;
				border-radius: 18px;
			}
		</style>
	</head>
	<body>

		<!--搜索框-->
		<form class="layui-form">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item" style="margin-bottom: 5px;">
				<div class="layui-input-block" style="margin-left: 5px;margin-top: 5px;">
					<label id="location"></label>
					<input type="text" name="title" autocomplete="off" class="layui-input"
						style="width:60% ;display: inline-block;border: 1px #009F95 solid;">
					<button id="search-btn" class="layui-btn" lay-submit lay-filter="formDemo"
						style="margin-top: -5px;width: 25%;border-radius: 10px;">搜索</button>
				</div>
			</div>
		</form>
		<!-- 轮播图 -->
		<div class="layui-carousel" id="test1" lay-filter="test1">
			<div id="carousel-img" carousel-item>
			</div>
		</div>

		<div class="noticeDiv">
			<label>通知消息:注意查看今天短信通知</label>
		</div>

		<!-- 智慧城市图文混排 -->
		<div class="zhDiv">
			<div>
				<ul class="list1">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">违章处理</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">罚款缴纳</div>
					</li>
					<li>
						<img src="image/3.png" align="bottom">
						<div class="p">违章撤销</div>
					</li>
					<li>
						<img src="image/4.png" align="bottom">
						<div class="p">服务中心</div>
					</li>

				</ul>
			</div>
		</div>
		<div class="newsDiv">
			<div>资讯内容</div>
			<div>资讯内容</div>
			<div>资讯内容</div>
			<div>资讯内容</div>
		</div>

		<!-- 功能入口图文混排 -->
		<div class="rmDiv">
			<div id="div_img2">
				<ul class="list2">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">意见反馈</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">信息申诉</div>
					</li>

				</ul>
			</div>
		</div>



		<!-- 导航图文混排 -->
		<div class="navDiv">
			<div id="div_img1">
				<ul class="list3">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">首页</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">网办进度</div>
					</li>
					<li>
						<img src="image/3.png" align="bottom">
						<div class="p">智慧环保</div>
					</li>
					<li>
						<img src="image/4.png" align="bottom">
						<div class="p">服务网点</div>
					</li>
					<li>
						<img src="image/5.png" align="bottom">
						<div class="p">个人中心</div>
					</li>
				</ul>
			</div>
		</div>


		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>

		<script>
			$(function() {
				loadScript();
				$("#location").on("click", function() {
					mapInit();
				});

				// 轮播获取图片
				$.ajax({
					url: baseUrl + "violation/list.json",
					contentType: "json",
					success: function(data) {
						if (data.code == "200") {
							var images = data.pageInfo.list;
							images.forEach(function(img) {
								var imgStr = img.name.replace(/\\/g, "/");

								var aStr =
									'<a href="carousel-content.html" style="background: url(';
								aStr += tUrl + unescape(imgStr);
								aStr += ') no-repeat;background-size:100% 100%;"></a>';
								$("#carousel-img").append(aStr);
								carouseLoad();
							});

						}
					}
				})

				// 违章处理
				$(".list1 li:first").on("click", function() {
					window.location.href = "violation-list.html";
				});

				//罚款缴纳
				$(".list1 li:eq(1)").on("click", function() {
					window.location.href = "violation-money1.html";
				});

				//违章撤销
				$(".list1 li:eq(2)").on("click", function() {
					window.location.href = "?";
				});

				// 意见反馈 信息申诉
				$(".list2 li").on("click", function() {
					window.location.href = "rm-content.html";
				});

				// 新闻点击事件
				$(".newsDiv").on("click", function() {
					window.location.href = "news-content.html";
				});


				// 导航滑动效果
				$(".list3 li").hover(
					function() {
						$(this).addClass("active");
					},
					function() {
						$(this).removeClass("active");
					}
				);

				//导航点击事件
				$(".list3 li").on("click", function() {
					var index = $(".list3 li").index(this);
					if (index > 0) {
						switch (index) {
							case 1:
								window.location.href = "all-service.html";
								break;
							case 2:
								window.location.href = "fp.html";
								break;
							case 3:
								window.location.href = "news-content.html";
								break;
							case 4:
								window.location.href = "personal-center.html";
								break;
						}
					}
				});
			});

			function carouseLoad() {
				// layui 轮播效果
				layui.use(['carousel', 'form'], function() {
					var carousel = layui.carousel;
					var form = layui.form;
					layer = layui.layer;
					//建造实例
					ins = carousel.render({
						elem: '#test1',
						full: false,
						width: '100%',
						height: '150px',
						autoplay: false,
						trigger: 'mouseover',
						arrow: 'none' //始终显示箭头
						//,anim: 'updown' //切换动画方式
					});

					//表单提交
					form.on('submit(formDemo)', function(data) {
						window.location.href = "news-content.html";
						return false;
					});
				});

				$("#test1").on("touchstart", function(e) {
					var startX = e.originalEvent.targetTouches[0].pageX; //开始坐标X
					$(this).on('touchmove', function(e) {
						arguments[0].preventDefault(); //阻止手机浏览器默认事件
					});
					$(this).on('touchend', function(e) {
						var endX = e.originalEvent.changedTouches[0].pageX; //结束坐标X
						e.stopPropagation(); //停止DOM事件逐层往上传播
						if (endX - startX > 30) {
							ins.slide("sub");
						} else if (startX - endX > 30) {
							ins.slide("add");
						}
						$(this).off('touchmove touchend');
					});
				});
			}

			function loadScript() {
				var script = document.createElement("script");
				script.src =
					"https://api.map.baidu.com/api?v=1.0&type=webgl&ak=do2yPKBE3TG2NWilpYYns6QPaYReUT2C&callback=mapInit&s=1";
				document.body.appendChild(script);
			}

			function mapInit() {
				//定位
				var myCity = new BMapGL.LocalCity();
				myCity.get(myFun);
			}

			function myFun(result) {
				var cityName = result.name;
				// map.setCenter(cityName);
				$("#location").html(cityName);

			}
		</script>
	</body>
</html>
